<template>
  <div>
    <!-- inline：表示行内表单 -->
    <el-form :inline="true" class="demo-form-inline" :model="cFrom">
      <el-form-item label="一级分类">
        <el-select placeholder="请选择" v-model="cFrom.category1Id" @change="handler1" :disabled="show">
          <el-option :label="c1.name" :value="c1.id" v-for="c1 in List1" :key="c1.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select placeholder="请选择" v-model="cFrom.category2Id" @change="handler2" :disabled="show">
          <el-option :label="c2.name" :value="c2.id" v-for="c2 in List2" :key="c2.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select placeholder="请选择" v-model="cFrom.category3Id" @change="handler3" :disabled="show">
          <el-option :label="c3.name" :value="c3.id" v-for="c3 in List3" :key="c3.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'CatgorySelect',
  data() {
    return {
      // 一级分类数据
      List1: [],
      // 二级分类数据
      List2: [],
      // 三级分类数据
      List3: [],
      // 收集相应的一级、二级、三级id
      cFrom: {
        category1Id: '',
        category2Id: '',
        category3Id: ''
      }
    }
  },
  props: ['show'],
  mounted() {
    // 获取一级分类的数据方法
    this.getCategory1List()
  },
  methods: {
     async getCategory1List() {
      let result = await this.$API.attr.reqCategory1List()
      if(result.code == 200) {
        this.List1 = result.data
      }
    },
    // 一级分类的select 事件回调（当一级分类的option发生变化的时候获取相应的二级分类数据）
    async handler1() {
      // 当一级分类数据发生变化，把二、三级数据清除
       this.List2 = []
       this.List3 = []
       this.cFrom.category2Id = ''
       this.cFrom.category3Id = ''
      //  解构出一级分类的id
      const {category1Id} = this.cFrom
      this.$emit('getCategoryId', {categoryId:category1Id, level:1})
      // 通过一级分类的Id获取二级分类的数据
       let result = await this.$API.attr.reqCateGory2List(this.cFrom.category1Id)
       if(result.code == 200) {
         this.List2 = result.data
       }
    },
    // 二级分类的select 事件回调（当二级分类的option发生变化的时候获取相应的三级分类数据）
    async handler2() {
      // 当二级分类数据发生变化，把三级分类数据清除
       this.List3 = []
       this.cFrom.category3Id = ''
      //  解构出二级分类的id
      const {category2Id} = this.cFrom
      this.$emit('getCategoryId', {categoryId:category2Id, level:2})
      // 通过二级分类的Id获取三级分类的数据
      let result = await this.$API.attr.reqCategory3List(category2Id)
       if(result.code == 200) {
         this.List3 = result.data
       }
    },
    // 三级分类的事件回调
    handler3() {
      //  解构出三级分类的id
      const {category3Id} = this.cFrom
      this.$emit('getCategoryId', {categoryId:category3Id, level:3})
    }

  }
}
</script>

<style>

</style>